<template>
  <!--  课程详细页面-->
  <Header></Header>
  <!-- 课程总体介绍板块 -->
  <div
    style="
      width: 100%;
      height: 420px;
      /* background-color: pink; */
      display: flex;
      justify-items: center;
      justify-content: center;
    "
  >
    <div class="course-details-banner">
      <div class="course-details-banner-header">
        <el-breadcrumb :separator-icon="ArrowRight" style="padding-top: 25px">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>计算机组成原理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="course-details-banner-body">
        <div class="course-details-banner-body-left">
          <div class="courseDetailsPic">
            <img src="../assets/img/jsjzcyl.png" alt="" />
          </div>
        </div>
        <div class="course-details-banner-body-right">
          <div class="course-details-banner-body-right-1">
            <h1>计算机组成原理</h1>
          </div>
          <div class="course-details-banner-body-right-2">
            我是课程介绍，我是课程介绍，我是课程介绍，我是课程介绍，我是课程介绍
          </div>
          <div class="course-details-banner-body-right-3">
            <div style="color: red; font-size: 30px">$199</div>
            <div>加入学习</div>
            <div>购买课程</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 课程简介、课程目录 -->
  <div class="big-1">
    <div class="big-2">
      <div class="big-2-left">
        <div
          class="banner-box"
          style="background-color: #fff; margin-top: 20px"
        >
          <div class="banner-section">
            <el-tabs
              v-model="activeName"
              style="
                padding-left: 40px;
                padding-right: 40px;
                background-color: #ffffff;
              "
              class="demo-tabs"
              @tab-click="handleClick"
            >
              <el-tab-pane label="课程简介" name="c-introduce"
                >计算机组成原理主要讲了一些关于计算机组成原理的东西</el-tab-pane
              >
              <el-tab-pane label="课程目录" name="c-catelogue">
                <div class="demo-collapse">
                  <el-collapse v-model="activeNames" @change="handleChange">
                    <el-collapse-item title="第一章" name="1">
                      <div>我是第一章的第一节课，这里放一些东西</div>
                    </el-collapse-item>
                    <el-collapse-item title="第二章" name="2">
                      <div>我是第二章的第一节课，这里放一些东西</div>
                    </el-collapse-item>
                    <el-collapse-item title="第三章" name="3">
                      <div>我是第三章的第一节课，这里放一些东西</div>
                    </el-collapse-item>
                    <el-collapse-item title="第四章" name="4">
                      <div>我是第四章的第一节课，这里放一些东西</div>
                    </el-collapse-item>
                  </el-collapse>
                </div></el-tab-pane
              >

              <el-tab-pane label="课程评价" name="c-comment"
                >这里是课程评价</el-tab-pane
              >
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="big-2-right" style="display: flex; flex-direction: column">
        <div>
          <div class="demo-rate-block">
            <span class="demonstration">课程评分</span>
            <el-rate v-model="value2" :colors="colors" />
          </div>
        </div>
        <div>
          <!--          课程提示-->
          <!-- <div class="demo-rate-block">
            <h1
              class="demonstration"
              style="font-size: 24px; margin-right: 140px; color: black"
            >
              课程提示
            </h1>
          </div> -->
          <!-- <div>

          </div> -->

          <!--          课程进度什么的-->
          <!--          <el-timeline>-->
          <!--            <el-timeline-item-->
          <!--              v-for="(activity, index) in activities"-->
          <!--              :key="index"-->
          <!--              :timestamp="activity.timestamp"-->
          <!--            >-->
          <!--              {{ activity.content }}-->
          <!--            </el-timeline-item>-->
          <!--          </el-timeline>-->
        </div>
      </div>
    </div>
  </div>
  <Footer></Footer>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import catalogue from "@/components/catalogue";

import { ref } from "vue";

const value2 = ref(null);
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);
const activities = [
  {
    content: "基础",
    timestamp: "2022-04-15",
  },
  {
    content: "提升",
    timestamp: "2022-04-29",
  },
  {
    content: "进阶",
    timestamp: "2022-05-11",
  },
  {
    content: "总结",
    timestamp: "2022-06-11",
  },
];

export default {
  name: "courseDetails",
  components: {
    Header,
    Footer,
    catalogue,
  },
  data() {
    return {
      isShow: "",
      activeName: "c-introduce",
    };
  },
  methods: {
    toggleSelection() {
      this.isSelected = !this.isSelected;
    },
  },
};
</script>

<style scoped></style>
